<template>
    <div class="cart">
        <header>购物车</header>
        <van-empty description="购物车是空的,赶快去购买吧" style="padding: 50px 0;" v-if="allprice<0">
            <van-button round type="danger" class="bottom-button" @click="goLogin">登录/注册</van-button>
        </van-empty>
        <!--商品列表-->
        <div class="seller-view" v-for="q in cartdata">
            <div class="seller-item u-flex u-col-center">
                <van-checkbox v-model="q.checked" @click="dianpu(q)" icon-size="0.8rem"></van-checkbox>
                <div>
                    <van-icon name="shop-o"/>
                    {{ q.seller_name }}
                </div>
            </div>
            <van-swipe-cell v-for="v in q.sku_list">
                <div class="cart-list">
                    <van-checkbox v-model="v.checked" @click="zxc(v)" icon-size="0.8rem"></van-checkbox>
                    <div class="u-flex u-flex-1" style="display: flex;width:95%;">
                        <img @click="$router.push({path:'/goods',query:{goods_id:v.goods_id,sku_id:v.sku_id}})"
                             :src="v.goods_image"
                             alt="" class="u-img" style="width: 90px;height: 90px;">
                        <div class="goods-info-view u-flex-1" >
                            <div class="u-line-2 goods-title" style="font-size: 0.55rem;"
                                 @click="$router.push({path:'/goods',query:{goods_id:v.goods_id,sku_id:v.sku_id}})">{{
                                v.name }}
                            </div>
                            <div class="u-flex u-row-between u-m-t-10" style="display: flex;justify-content: space-between">
                                <div style="color:red;">￥ {{ v.purchase_price }}</div>
                                <div class="u-numberbox" >
                                    <van-stepper v-model="v.num" :max="v.enable_quantity" @plus="jia(v)"
                                                 @minus="jian(v)" @change="gai(v)" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="dele(v)"/>
                </template>
            </van-swipe-cell>
        </div>
        <van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checked" @click="quanxuan" icon-size="0.8rem" style="font-size: 10px;">全选
            </van-checkbox>
            <div style="color:red;font-size: 0.5rem;" @click="delechoose">删除已选</div>
        </van-submit-bar>
        <!--底部导航-->
        <van-tabbar v-model="active" active-color="#ee0a24">
            <van-tabbar-item icon="wap-home-o" @click="goHome">首页</van-tabbar-item>
            <van-tabbar-item icon="apps-o" @click="goTyp">分类</van-tabbar-item>
            <van-tabbar-item icon="cart-o">购物车</van-tabbar-item>
            <van-tabbar-item icon="user-o" @click="goMine">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    import jsp from '../../../Api/Api'
    import Vue from 'vue'
    import {Dialog} from 'vant';
    import uuidv1 from "uuid/v1"

    Vue.use(Dialog);
    export default {
        name: "Cart",
        data() {
            return {
                active: 2,
                title: "购物车",
                cartdata: [],
                checked: false,
                // active3: 2,
                result: [],
            }
        },
        computed: {
            allprice() {
                let a = 0;
                console.log(this.cartdata)
                this.cartdata.forEach(v => {
                    v.sku_list.forEach(q => {
                        a += q.num * q.purchase_price
                    })
                })
                return a * 100
            },
        },
        watch: {
            cartdata() {
                console.log(this.checked)
                this.checked = !this.cartdata.some(v => {
                    return v.checked === 0
                })
            }
        },
        // created() {
        //     let a = localStorage.getItem('accessToken')
        //     jsp.cartPrice(a).then(data => {
        //         console.log(data.data)
        //         this.lis = data.data.cart_list
        //         this.totalprice = data.data.total_price.total_price
        //     }).catch(error => console.log(error))
        // },
        methods: {
            goHome() {
                this.$router.push('/home')
            },
            goTyp() {
                this.$router.push('/classify')
            },
            goMine() {
                this.$router.push('/mine')
            },
            goLogin() {
                this.$router.push('/enter')
            },
            onSubmit() {

            },
            //删除已选
            delechoose() {
                let c = localStorage.getItem('accessToken')
                this.$dialog.confirm({
                    title: '提示',
                    message: '确定要删除这个货品吗？',
                })
                    .then(() => {
                        // on confirm
                        let a = []
                        this.cartdata.forEach(v => {
                            v.sku_list.forEach(q => {
                                if (q.checked) a.push(q.sku_id)
                            })
                        })
                        let b = a.toString();
                        jsp.getTable1H20(b,c).then(data => {
                            jsp.getTable1H18(c).then(data => {
                                this.cartdata = data.data.cart_list
                            })
                        })
                    })
                    .catch(() => {
                        // on cancel
                    });
            },
            //删除
            dele(v) {
                let c = localStorage.getItem('accessToken')
                this.$dialog.confirm({
                    title: '提示',
                    message: '确定要删除这个货品吗？',
                })
                    .then(() => {
                        // on confirm
                        jsp.getTable1H20(v.sku_id,c).then(data => {
                            jsp.getTable1H18(c).then(data => {
                                this.cartdata = data.data.cart_list
                            })
                        })
                    })
                    .catch(() => {
                        // on cancel
                    });
            },
            //店铺
            dianpu(v) {
                let a = 0;
                if (v.checked) {
                    a = 1
                } else {
                    a = 0
                }
                if (v.checked) {
                    v.sku_list.forEach(q => {
                        q.checked = true
                    })
                } else {
                    v.sku_list.forEach(q => {
                        q.checked = false
                    })
                }
                // console.log(v)
                let c = localStorage.getItem('accessToken')
                // console.log(c)
                this.axios.post('https://api.javamall.com.cn/buyer/trade/carts/seller/' + v.seller_id + '?checked=' +
                    a, {},{
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded",
                            'Authorization':c,
                            'uuid': uuidv1(),
                        }
                    }
                )
            },
            //商品
            zxc(v) {
                console.log(v);
                let formData = new FormData();
                let a = 0;
                if (v.checked) {
                    a = 1
                } else {
                    a = 0
                }
                formData.append('checked', a);
                let c = localStorage.getItem('accessToken')
                // console.log(c)
                this.axios.post('https://api.javamall.com.cn/buyer/trade/carts/sku/' + v.sku_id, formData, {
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded",
                        'Authorization':c,
                        'uuid': uuidv1(),
                    }
                }).then(() => {
                    jsp.getTable1H18(c).then(data => {
                        this.cartdata = data.data.cart_list
                    })
                })
            },
            quanxuan() {
                if (this.checked) {
                    this.cartdata.forEach(v => {
                        v.checked = true
                        v.sku_list.forEach(q => {
                            q.checked = true
                        })
                    })
                } else {
                    this.cartdata.forEach(v => {
                        v.checked = false
                        v.sku_list.forEach(q => {
                            q.checked = false
                        })
                    })
                }
            },
            jia(v) {
                let c = localStorage.getItem('accessToken')
                jsp.getTable1H17(v.sku_id, 1, '', '').then(data => {
                    jsp.getTable1H18(c).then(data => {
                        this.cartdata = data.data.cart_list
                        console.log(data);
                    })
                })
            },
            jian(v) {
                let formData = new FormData();
                formData.append('num', v.num - 1);
                this.axios.post('https://api.javamall.com.cn/buyer/trade/carts/sku/' + v.sku_id, formData, {
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded",
                        'Authorization':c,
                        'uuid': uuidv1(),
                    }
                })
            },
            gai(v) {
                this.$toast.loading({forbidClick: true});
                clearTimeout(this.timer);
                let c = localStorage.getItem('accessToken')
                this.timer = setTimeout(() => {
                    this.$toast.clear();
                    let formData = new FormData();
                    formData.append('num', v.num);
                    this.axios.post('https://api.javamall.com.cn/buyer/trade/carts/sku/' + v.sku_id, formData, {
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded",
                            'Authorization':c,
                            'uuid': uuidv1(),
                        }
                    }).catch(data => {
                        if (v.num > v.enable_quantity) this.$toast.fail(data.response.data.message);
                    })
                }, 500);
            },
            onSubmit() {

            }
        },
        mounted() {
            let c = localStorage.getItem('accessToken')
            jsp.getTable1H18(c).then(data => {
                this.cartdata = data.data.cart_list
                console.log(data);
            })
        }
    }
</script>

<style scoped>
    header {
        background: url("../../../assets/bg2.png") 0% 0% / cover;
        width: 100%;
        height: 2rem;
        text-align: center;
        line-height: 2rem;
        color: white;
        font-size: 0.7rem;
        position: fixed;
        top: 0;
        left: 0;
    }

    .bottom-button {
        width: 160px;
        height: 40px;
    }

    >>> .van-submit-bar {
        bottom: 49px !important;
        border: 1px solid #f2f2f2;
    }

    >>> .van-submit-bar__price {
        font-size: 9px;
    }

    >>> .van-submit-bar__price--integer {
        font-size: 14px;
        font-weight: 600;
    }

    .goods-card {
        margin: 0;
        background-color: white;
    }

    .delete-button {
        height: 100%;
    }

    .u-navbar-inner {
        display: flex;
        -webkit-box-pack: justify;
        justify-content: center;
        position: relative;
        -webkit-box-align: center;
        align-items: center;
        height: 2.2rem;
        color: white;
    }

    .cart {
        margin-top: 2.75rem;
        padding-bottom: 6.5rem;
    }

    .seller-view {
        background-color: #fff;
        border-radius: 0.4rem;
        overflow: hidden;
        margin-top: 0.4rem;
    }

    .seller-view .seller-item {
        width: 100%;
        margin: 0.4rem;
        display: flex;
    }

    .goods-card {
        margin: 0;
        background-color: white;
    }

    .delete-button {
        height: 100%;
    }

    >>> .van-card__price span {
        color: red;
    }

    .u-img {
        width: 3.8rem;
    }

    .goods-info-view {
        padding: 0.3rem;
        padding-right: 0.4rem;
    }

    .u-numberbox {
        display: -webkit-inline-box;
        display: -webkit-inline-flex;
        display: inline-flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .u-icon-minus {
        border-radius: 0.15rem 0 0 0.15rem;
    }

    .u-icon-minus, .u-icon-plus {
        background-color: #fff !important;
        width: 0.6rem;
    }

    .cart-list {
        display: flex;
        margin: 0.4rem;
        border-radius: 0.4rem;
        overflow: hidden;
        background-color: #fff;
        position: relative;
        align-items: center;
        justify-content: space-between;
    }

    >>> .van-submit-bar {
        bottom: 2.45rem;
    }

    >>> .van-submit-bar__price--integer {
        font-size: 0.55rem;
    }
</style>